﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>模式窗口</title>
    <link href="../../twiModalWindow/twiModalWindow.css" rel="stylesheet" />
    <script src="../../jquery-1.8.3.min.js"></script>
    <style type="text/css">        
        /*Twi概念主题*/
        #twiSkinModal {
           width:590px;
        }
        #twiSkinModal .twi-md-content > div {
            padding: 10px;
        }
        #skinContainer {
            background-color:white;
            max-height:260px;
            padding:15px;
            overflow:auto;
            font-family:'Microsoft YaHei';
            font-weight:bold;
        }
        #skinContainer .skinItem {    
            float:left;
            width:120px;
            padding:10px 5px;
            cursor:default;
            border:2px solid transparent;
        }
        #skinContainer .skinSlt {
   
        }
        #skinContainer .skinColor,
        #skinContainer .skinColor2 {
            text-align:center;
            padding:8px;
            font-size:14px;
            line-height:20px;
        }
        #skinContainer .skinName {
            text-align:center;
            color:black;
        }
        #skinContainer .skinCode {
             display:none;
        }
        #twiSkinSave {
             margin-top:10px;
             min-width:120px;
             font-weight:bolder;
        }
    </style>
</head>
<body>
    <h2>Twi模式窗口v1.1.0</h2>
    <button id="btnShowModal"  class="twi-md-btn twi-md-btn-red">显示模式窗口（TwiSkin）</button>

    <div class="twi-md-modal twi-md-effect-1" id="twiSkinModal">
	    <div class="twi-md-content twi-md-bg-red">
		    <h3>概念主题设置</h3>
		    <div>
                <div id="skinContainer">
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#1ABC9C;">#1ABC9C</div>
                        <div class="skinColor2"  style="background-color:#16A085;">#16A085</div>
                        <div class="skinName" style="color:#16A085;">绿松石</div>
                        <div class="skinCode">turquoise</div>
                    </div>
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#F1C40F;">#F1C40F</div>
                        <div class="skinColor2" style="background-color:#F39C12;">#F39C12</div>
                        <div class="skinName" style="color:#F39C12;">向日橙</div>
                        <div class="skinCode">sunorange</div>
                    </div>                
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#3498DB;">#3498DB</div>
                        <div class="skinColor2" style="background-color:#2980B9;">#2980B9</div>
                        <div class="skinName" style="color:#2980B9;">梦之蓝</div>
                        <div class="skinCode">dreamblue</div>
                    </div>
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#9B59B6;">#9B59B6</div>
                        <div class="skinColor2" style="background-color:#8E44AD;">#8E44AD</div>
                        <div class="skinName" style="color:#8E44AD;">紫水晶</div>
                        <div class="skinCode">amethyst</div>
                    </div>
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#2ECC71;">#2ECC71</div>
                        <div class="skinColor2" style="background-color:#27AE60;">#27AE60</div>
                        <div class="skinName" style="color:#27AE60;">祖母绿</div>
                        <div class="skinCode">emerland</div>
                    </div>
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#34495E;">#34495E</div>
                        <div class="skinColor2" style="background-color:#2C3E50;">#2C3E50</div>
                        <div class="skinName" style="color:#2C3E50;">黑雨夜</div>
                        <div class="skinCode">rainright</div>
                    </div>
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#E74C3C;">#E74C3C</div>
                        <div class="skinColor2" style="background-color:#C0392B;">#C0392B</div>
                        <div class="skinName" style="color:#C0392B;">茜素红</div>
                        <div class="skinCode">alizarin</div>
                    </div>
                    <div class="skinItem">
                        <div class="skinColor"  style="background-color:#E67E22;">#E67E22</div>
                        <div class="skinColor2" style="background-color:#D35400;">#D35400</div>
                        <div class="skinName" style="color:#D35400;">古韵棕</div>
                        <div class="skinCode">brown</div>
                    </div>
                    <div class="clear"></div>
                </div>
			    <button id="twiSkinSave" class="twi-md-btn twi-md-btn-red twi-md-close">确定</button>
		    </div>
	    </div>
    </div>
    <div class="twi-md-overlay twi-md-overlay-red"></div>
    <script type="text/javascript">
        $(function () {
            var modal = $('#twiSkinModal');
            $('#btnShowModal').click(function () {
                //随机效果
                var nRandom = Math.floor(100 * Math.random()); // 这里返回 [0,99]                 
                var index = nRandom % 11;
                $('#twiSkinModal').removeClass().addClass('twi-md-modal twi-md-effect-' + (index + 1));
                modal.addClass('twi-md-show');
            });
            //关闭按钮
            $('.twi-md-close').click(function (ev) {
                ev.stopPropagation();
                modal.removeClass('twi-md-show');
            });
            //选择事件
            $('#skinContainer').children('.skinItem').click(function () {
                $('#skinContainer').children('.skinItem').removeClass('skinSlt').css('border-color', 'transparent');
                var color = $(this).children('.skinColor2').first().html();
                $(this).addClass('skinSlt').css('border-color', color);

                //更换主题
                var twiSkin = $('#skinContainer').children('.skinSlt').children('.skinCode').html();
                $('#twiSkinModal .twi-md-content').removeClass().addClass('twi-md-content twi-md-bg-' + twiSkin);
                $('#twiSkinSave').removeClass().addClass('twi-md-btn twi-md-close twi-md-btn-' + twiSkin);
                $('#btnShowModal').removeClass().addClass('twi-md-btn twi-md-btn-' + twiSkin);
                $('.twi-md-overlay').removeClass().addClass('twi-md-overlay twi-md-overlay-'+twiSkin);
            });
        });
    </script>
</body>
</html>
